<template>
	<view class="order" :style="{minHeight: pageHeight + 'px'}">
		<view style="border-radius: 10px;align-items: center;display: flex;width: 345px;margin: 15px auto;background-color: #fff;box-sizing: border-box;padding: 10px 15px;">
			<view style="flex: 1;">
				<view>
					<text style="font-size: 14px;vertical-align: middle;margin-bottom: 5px;">阿伯次的</text>
					<text style="font-size: 12px;vertical-align: middle;color: rgba(51, 46, 46, 0.6);margin-left: 10px;">177 **** 4567</text>
				</view>
				<view style="font-size: 11px;color: rgba(51, 46, 46, 0.6)">
					安徽省 合肥市 瑶海区 东一环与临淮路交口
					铭座大厦1713(三里街)
				</view>
			</view>
			<view style="flex: 0 0 25px;text-align: right;">
				<u--image src="../../../static/images/icon-right.svg" width="14px" height="14px" style="display: inline-block;margin-right: 0;vertical-align: middle;"></u--image>
			</view>
		</view>
		
		<view style="width: 90%;border-radius: 10px;margin: 15px auto;box-sizing: border-box;padding: 15px;background-color: #fff;">
			<view style="display: block;margin-bottom: 15px;">
				<u--image src="" width="14px" height="14px" style="margin-right: 10px;display: inline-block;margin-right: 0;vertical-align: middle;"></u--image>
				<text style=";margin-left: 10px;: inline-block;vertical-align: middle;font-size: 14px;color: #2E3033">福建北峰科技股份有限公司</text>
			</view>
			<u-line color="rgba(40, 44, 49, 0.05)" style=""></u-line>
			<view style="display: flex;align-items: center;padding: 15px 0;">
				<view style="width: 60px;">
					<u--image src="" width="60px" height="60px" style="margin-right: 10px;display: inline-block;margin-right: 0;vertical-align: middle;"></u--image>
				</view>
				<view style="flex: 1;margin-left: 10px;margin-right: 20px;">
					<text style="display: block;font-size: 14px;color: #332E2E;">北斗信号弹TD10（北斗三号短报文应急示位搜救终端）</text>
					<text style="color: rgba(51, 46, 46, 0.6);font-size: 11px;">规格：北斗信号弹TD10</text>
				</view>
				<view style="width: 30px;text-align: center;font-size: 11px;color: rgba(51, 46, 46, 0.6);">x1</view>
			</view>
			<u-line color="rgba(40, 44, 49, 0.05)" style=""></u-line>
			<view style="display: flex;width: 100%;margin-bottom: 10px;">
				<text style="flex: 1;font-size: 14px;color: #332E2E;">总商品金额：</text>
				<text style="flex: 0 0 90px;font-size: 14px;color: #EF312A;text-align: center;	">￥9999.00</text>
			</view>
			<view style="display: flex;width: 100%;">
				<text style="flex: 1;font-size: 14px;color: #332E2E;">运费：</text>
				<text style="flex: 0 0 90px;font-size: 14px;color: #332E2E;text-align: center;	">￥9999.00</text>
			</view>
			<view style="margin-top: 15px;margin-bottom: 15px;">
				  <u--textarea height="100px" placeholder="备注" border="none" :customStyle="{background: '#F7F8FA'}"></u--textarea>
			</view>
			<view style="margin-top: 15px;text-align: right;">
				<text style="font-size: 12px;color: #EF312A;">共计：￥</text>	<text style="font-size: 18px;color: #EF312A;">1222.00</text>
			</view>
		</view>
		
		<view class="submit" @click="doWay('a')">确认收货</view>
		<view class="submit" @click.stop.prevent="doWay('b')" style="margin: 15px auto;background: #fff;color: #2E3033;">申请退款</view>
		<view class="submit" @click="doWay('c')" style="margin: 15px auto;background: #fff;color: #2E3033;">删除订单</view>
		
		<u-modal :show="showOrder" :title="titleOrder" @cancel="cancelOrder" :showCancelButton="true" confirmColor="#2E3033" cancelColor="#2E3033">
			<view class="slot-content" style="text-align: center;font-size: 14px;color: #2E3033;">
				<rich-text :nodes="contentOrder"></rich-text>
			</view>
		</u-modal>
		
		<u-popup :show="showPay" round="20" @close="bindClosePay" @open="bindOpenPay">
			<view class="payWrap">
				<text style="font-size: 14px;color: #282C31;display: block;;margin-bottom: 35px;">选择付款方式</text>
				
				<view style="display: flex;margin-bottom: 15px;">
					<view style="flex: 1;">
						<u--image src="../../../static/images/icon-alipay.svg" width="28px" height="28px" style="margin-right: 10px;display: inline-block;margin-right: 0;vertical-align: middle;"></u--image>
						<text style="font-size: 14px;vertical-align: middle;color: #333;margin-left: 10px;">支付宝</text>
					</view>
					<view style="flex: 0 0 30px;text-align: right;">
						<u--image src="../../../static/images/icon-right.svg" width="14px" height="14px" style="margin-right: 10px;display: inline-block;margin-right: 0;vertical-align: middle;"></u--image>
					</view>
				</view>
				<u-line color="rgba(40, 44, 49, 0.1)"></u-line>
				<view style="display: flex;margin: 15px 0;">
					<view style="flex: 1;">
						<u--image src="../../../static/images/icon-wechatpay.svg" width="28px" height="28px" style="margin-right: 10px;display: inline-block;margin-right: 0;vertical-align: middle;"></u--image>
						<text style="font-size: 14px;vertical-align: middle;color: #333;margin-left: 10px;">微信</text>
					</view>
					<view style="flex: 0 0 30px;text-align: right;">
						<u--image src="../../../static/images/icon-right.svg" width="14px" height="14px" style="margin-right: 10px;display: inline-block;margin-right: 0;vertical-align: middle;"></u--image>
					</view>
				</view>
				<u-line color="rgba(40, 44, 49, 0.05)" style=""></u-line>
				
				<view class="bindReslt">确认支付</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPay: false,
				showOrder: false,
				titleOrder: null,
				pageHeight: null,
				contentOrder: '确定取消订单吗？取消后不可恢复',
				titleOrder: '取消订单'
			}
		},
		created() {
			this.$nextTick(() => {
				uni.getSystemInfo({
				  success: (res) => {  
					this.pageHeight = res.windowHeight
				  }  
				});
				
		
			})
		},
		methods: {
			bindClosePay() {},
			bindOpenPay() {},
			doWay(type) {
				if(type == 'a') {
					this.titleOrder = '确定收货';
					this.contentOrder = '确定收货吗？';
					this.showOrder = true;
				}
				if(type == 'b') {
					uni.navigateTo({
						url: '/pages/components/mine/refund'
					})
				}
				if(type == 'c') {
					this.titleOrder = '取消订单';
					this.contentOrder = '确定取消订单吗？取消后不可恢复';
					this.showOrder = true;
				}
			},
			cancelOrder() {
				this.titleOrder = null;
				this.contentOrder = null;
				this.showOrder = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		background: #F7F8F9;
		padding-top: 15px;
	}
	
	.payWrap {
		height: 251px;
		box-sizing: border-box;
		padding: 15px;
		position: relative;
	}
	
	.bindReslt {
		width: 355px;
		height: 40px;
		background: #EF312A;
		border-radius: 10px;
		text-align: center;
		line-height: 40px;
		text-align: center;
		color: #fff;
		font-size: 14px;
		font-weight: 400;
	}
	.submit {
		width: 355px;
		height: 40px;
		line-height: 40px;
		background: #EF312A;
		border-radius: 10px;
		text-align: center;
		color: #fff;
		// position: absolute;
		bottom: 15px;
		left: 0;right: 0;
		margin: 0 auto;
		font-weight: 400;
		font-size: 14px;
	}
</style>